<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/rule_editor_common.css">
    <link rel="stylesheet" type="text/css" href="../css/rule_editor.css">
    <link rel="stylesheet" type="text/css" href="../css/keywords.css">
    <title>CustomBlocker Rule Editor</title>
  </head>
  <body style="width:400px;margin:0">
    <div id="rule_editor_outline">
      <div class="rule-editor-body customblocker_rule_dialog" id="rule_editor_body">
        <section class="section rule-editor-body__section">
          <div class="sectionBody">
            <div class="input_section">
              <div class="label">ルール名</div>
              <div class="sectionBody">
                <input class="rule_editor_textbox" id="rule_editor_title" type="text">
              </div>
            </div>
          </div>
        </section>
        <section class="section rule-editor-body__section">
          <h2><span class="text">対象サイト</span></h2>
          <div class="sectionBody">
            <div class="input_section">
              <div class="label">URL</div>
              <input class="rule_editor_textbox" id="rule_editor_site_regexp" type="text"><a class="help" href="site.html"> ?</a>
            </div>
            <div style="padding-left: 49px !important">
              <input id="specify_url_by_regexp_checkbox" type="checkbox">
              <label for="specify_url_by_regexp_checkbox">正規表現で指定</label>
            </div>
            <div class="section_alert" id="rule_editor_alert_site_regexp">このサイトのURLとマッチしません。</div>
            <div class="input_section" style="display: none">
              <div class="label">URL例</div>
              <input class="rule_editor_textbox" id="rule_editor_example_url" type="text">
            </div>
            <div class="input_section" style="display: none">
              <div class="label">メモ</div>
              <input class="rule_editor_textbox" id="rule_editor_site_description" type="text">
            </div>
            <div class="description">「*」は全ての文字列とマッチします。</div>
          </div>
        </section>
        <section class="section rule-editor-body__section">
          <h2><span class="text">隠す要素</span></h2>
          <div class="sectionBody">
            <div class="content">
              <div class="input_section" id="rule_editor_section_hide_xpath" style="display: none;">
                <div class="label"><span class="rule_editor_count rule_editor_count_hide" id="rule_editor_count_hide_block_xpath"></span> XPath</div>
                <input class="rule_editor_textbox" id="rule_editor_hide_block_xpath" type="text">
                <input class="uiButton xpath_picker" id="rule_editor_button_hide_block_xpath" type="button" value="候補を表示"><a class="help" href="hide.html"> ?</a>
              </div>
              <div class="input_section" id="rule_editor_section_hide_css" style="display: block;">
                <div class="label"><span class="rule_editor_count rule_editor_count_hide" id="rule_editor_count_hide_block_css"> 51</span>CSS</div>
                <input class="rule_editor_textbox" id="rule_editor_hide_block_css" type="text">
                <input class="uiButton xpath_picker" id="rule_editor_button_hide_block_css" type="button" value="候補を表示"><a class="help" href="hide.html"> ?</a>
              </div>
              <div class="selector_radio_container">
                <input id="rule_editor_radio_hide_xpath" type="radio" name="rule_editor_radio_hide">
                <label for="rule_editor_radio_hide_xpath">XPath</label>
                <input id="rule_editor_radio_hide_css" type="radio" name="rule_editor_radio_hide" checked="">
                <label for="rule_editor_radio_hide_css">CSS</label>
              </div>
              <div class="section_alert" id="rule_editor_alert_hide_block_xpath" style="display: none;">XPathが無効です</div>
              <div class="input_section" style="display: none">
                <div class="label">メモ</div>
                <input class="rule_editor_textbox" id="rule_editor_hide_block_description" type="text">
              </div>
              <div class="description">ここで指定した単位で要素を隠します。</div>
            </div>
          </div>
        </section>
        <section class="section rule-editor-body__section">
          <h2><span class="text">条件</span></h2>
          <div class="sectionBody">
            <!-- Radio Buttons-->
            <div>
              <div>
                <input id="rule_editor_block_anyway" type="radio" name="rule_editor_block_anyway">
                <label for="rule_editor_block_anyway">無条件で隠す</label><a class="help" href="block_anyway.html"> ?</a>
              </div>
              <div>
                <input id="rule_editor_block_anyway_false" type="radio" name="rule_editor_block_anyway">
                <label for="rule_editor_block_anyway_false">キーワードを使ってフィルタ</label>
              </div>
            </div>
            <!-- Condition-->
            <div class="rule_editor_condition_section" id="rule_editor_hide_detail">
              <h4>キーワード</h4>
              <div id="rule_editor_keywords" style="margin-left: 0;"></div>
              <div>
                <div>
                  <input class="rule_editor_textbox" id="rule_editor_keyword" type="text"><a class="help" href="keywords.html"> ?</a>
                  <input class="uiButton" id="rule_editor_add_keyword_button" type="button" value="Add"><br>
                  <input id="rule_editor_keyword_complete_matching_checkbox" type="checkbox">
                  <label for="rule_editor_keyword_complete_matching_checkbox">完全一致</label>
                  <input id="rule_editor_keyword_regexp_checkbox" type="checkbox">
                  <label for="rule_editor_keyword_regexp_checkbox">正規表現</label>
                  <!-- Ignore Case-->
                  <input id="rule_editor_keyword_case_sensitive_checkbox" type="checkbox">
                  <label for="rule_editor_keyword_case_sensitive_checkbox">大文字小文字を区別</label>
                  <!-- Include link URL-->
                  <input id="rule_editor_keyword_include_href_checkbox" type="checkbox">
                  <label for="rule_editor_keyword_include_href_checkbox">リンクURLも検索</label>
                </div>
              </div>
              <h4>キーワードグループ</h4>
              <div id="rule_editor_keyword_groups" style="margin-left: 0;"></div>
              <div>
                <select id="rule_editor_keyword_group_select">
                  <option>-----</option>
                </select><a href="../pref/word_group.html" target="_blank">グループを管理</a>
              </div>
              <h4>検索範囲</h4>
              <div class="input_section" id="rule_editor_section_search_xpath" style="display: none;">
                <div class="label"><span class="rule_editor_count rule_editor_count_search" id="rule_editor_count_search_block_xpath"></span>XPath</div>
                <input class="rule_editor_textbox" id="rule_editor_search_block_xpath" type="text">
                <input class="uiButton xpath_picker" id="rule_editor_button_search_block_xpath" type="button" value="候補を表示"><a class="help" href="search.html"> ?</a>
              </div>
              <div class="input_section" id="rule_editor_section_search_css" style="display: block;">
                <div class="label"><span class="rule_editor_count rule_editor_count_search" id="rule_editor_count_search_block_css">83</span>CSS</div>
                <input class="rule_editor_textbox" id="rule_editor_search_block_css" type="text">
                <input class="uiButton xpath_picker" id="rule_editor_button_search_block_css" type="button" value="候補を表示"><a class="help" href="search.html"> ?</a>
              </div>
              <div class="selector_radio_container">
                <input id="rule_editor_radio_search_xpath" type="radio" name="rule_editor_radio_search">
                <label for="rule_editor_radio_search_xpath">XPath</label>
                <input id="rule_editor_radio_search_css" type="radio" name="rule_editor_radio_search" checked="">
                <label for="rule_editor_radio_search_css">CSS</label>
              </div>
              <div class="section_alert" id="rule_editor_alert_search_block_xpath" style="display: none;">XPathが無効です</div>
              <div class="input_section" style="display: none">
                <div class="label">Description</div>
                <input class="rule_editor_textbox" id="rule_editor_search_block_description" type="text">
              </div>
              <div class="description">この範囲にNGワードが含まれていたときのみルールが発動します。</div>
            </div>
          </div>
        </section>
        <footer class="footer">
          <input class="uiButton" id="rule_editor_save_button" type="button" value="保存">
          <input class="uiButton" id="rule_editor_test_button" type="button" value="テスト">
          <input class="uiButton" id="rule_editor_close_button" type="button" value="閉じる">
        </footer>
        <div id="rule_editor_alert"></div>
      </div>
      <script type="text/javascript" src="../src/word_group_picker.js"></script>
      <script type="text/javascript" src="../src/rule_editor/rule_editor_frame.js"></script>
      <script type="text/javascript" src="../src/CustomBlocker.js"></script>
    </div>
  </body>
</html>